<template>
  <div class="app-container">
    <el-card class="form-container" shadow="never">
      <el-form :model="form" :rules="rules" ref="AddPicInfoForm">
        <el-form-item label="演员名字" prop="value">
          <el-select v-model="form.value" filterable placeholder="请选择">
            <el-option
              v-for="item in actorList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="图片">
          <multi-upload v-model="actorPic" :maxCount="100"></multi-upload>
        </el-form-item>

        <el-form-item>
          <el-button :disabled="saveBtnDisabled" type="primary" @click="savePic"
            >保存</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import albumPicAPI from "@/api/albumPic";
import actor from "@/api/actor";
import MultiUpload from "@/components/Upload/multiUpload";
export default {
  components: {
    MultiUpload,
  },
  data() {
    return {
      //查询出来的演员列表
      actorList: null,

      form: {
        value: "",
      },

      loading: false,
      //上传完成后返回的链接地址
      actorPic: [],
      //专辑ID
      albumId: "",
      dialogImageUrl: "",
      dialogVisible: false,
      //服务器地址
      UPLOAD_URL: process.env.UPLOAD_URL,

      //是否禁用保存按钮
      saveBtnDisabled: false,
      rules: {
        value: [
          { required: true, message: "请选择演员名字", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.albumId = this.$route.params.id;
    this.getActorList();
  },
  methods: {
    //查询所有演员信息
    getActorList() {
      actor.getAllActors().then((res) => {
        console.log(res);
        this.actorList = res.data.result;
      });
    },
    //保存
    savePic() {
      this.$refs["AddPicInfoForm"].validate((valid) => {
        if (valid) {
          saveBtnDisabled: true;
          let albumPics = [];
          for (let url of this.actorPic) {
            let obj = {
              albumId: this.albumId,
              actorId: this.form.value,
              picUrl: url,
            };
            albumPics.push(obj);
          }
          console.log(albumPics);
          albumPicAPI.addPic(albumPics).then((res) => {
            this.$message.success("上传成功");
            console.log(res.message);
          });
          this.saveBtnDisabled = true;
          //跳转到list界面
          this.$router.push({ path: "/Album/pic" });
        }
      });
    },
  },
};
</script>